body{margin:0;padding:0;background:#ffe;font-size:14px;font-family:'微软雅黑','宋体',sans-serif;color:#231F20;overflow:auto}
a {color:#000;font-size:14px;}
#main{width:100%;}
#wrap{position:relative;margin:0 auto;width:1100px;height:680px;margin-top:10px;}
#text{width:400px;height:425px;left:60px;top:80px;position:absolute;}
#code{display:none;font-size:16px;}
#clock-box {position:absolute;left:60px;top:550px;font-size:28px;display:none;}
#clock-box a {font-size:28px;text-decoration:none;}
#clock{margin-left:48px;}
#clock .digit {font-size:64px;}
#canvas{margin:0 auto;width:1100px;height:680px;}
#error{margin:0 auto;text-align:center;margin-top:60px;display:none;}
.hand{cursor:pointer;}
.say{margin-left:5px;}
.space{margin-right:150px;}
@keyframes rotate-frame {
    0% {
        transform: rotateX(-20deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(-20deg) rotateY(36deg);
    }
    20% {
        transform: rotateX(-20deg) rotateY(72deg);
    }
    30% {
        transform: rotateX(-20deg) rotateY(108deg);
    }
    40% {
        transform: rotateX(-20deg) rotateY(144deg);
    }
    50% {
        transform: rotateX(-20deg) rotateY(180deg);
    }
    60% {
        transform: rotateX(-20deg) rotateY(216deg);
    }
    70% {
        transform: rotateX(-20deg) rotateY(252deg);
    }
    80% {
        transform: rotateX(-20deg) rotateY(288deg);
    }
    90% {
        transform: rotateX(-20deg) rotateY(324deg);
    }
    100% {
        transform: rotateX(-20deg) rotateY(360deg);
    }

}
body {
    background:rgba(248, 202, 209, 0.904);
}
.photo-wrap {
    perspective: 800px;
    width: 800px;
    margin: 0 auto;
}
.container {
    width: 800px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    transform:rotateX(-10deg);
    animation: rotate-frame 20s linear infinite;
}
.img {
    width: 117px;
    height: 190px;
    line-height: 118px;
    text-align: center;
    position: absolute;
    top: 160px;
    left: 300px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
    -webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
    background: pink;
    background:-moz-linear-gradient(top, pink, rgba(0, 0, 255, 0.5));
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ccccff), to(rgba(174, 221, 129, 0.5)));
    background:-o-linear-gradient(top, pink, rgba(0, 0, 255, 0.5));
    transform: rotateY(0deg);
}
.img10 {
    background:url(./IMG_0804.png) no-repeat center center;
}
.img01 {
    transform: rotateY(0deg) translateZ(300px);
    background:url(./IMG_0756.png) no-repeat center center;
}
.img02 {
    transform: rotateY(40deg) translateZ(300px);
    background:url(./IMG_0793.png) no-repeat center center;
}
.img03 {
    transform: rotateY(80deg) translateZ(300px);
    background:url(./IMG_0797.png) no-repeat center center;
}
.img04 {
    transform: rotateY(120deg) translateZ(300px);
    background:url(./IMG_0798.png) no-repeat center center;
}
.img05 {
    transform: rotateY(160deg) translateZ(300px);
    background:url(./490BD33E-0C10-40E7-A86B-EA62A6E03203.png) no-repeat center center;
}
.img06 {
    transform: rotateY(200deg) translateZ(300px);
    background:url(./IMG_0804.png) no-repeat center center;
}
.img07 {
    transform: rotateY(240deg) translateZ(300px);
    background:url('./IMG_0597nnnn.png') no-repeat center center;
}
.img08 {
    transform: rotateY(280deg) translateZ(300px);
    background:url('./33222.png') no-repeat center center;
}
.img09 {
    transform: rotateY(320deg) translateZ(300px);
    background:url('./6666.jpg') no-repeat center center;
}
